<template>
  <div>
    <h2 class="headtop">已看<span v-if="$store.state.dramasEntries.length">({{$store.state.dramasEntries.length}})</span>
    </h2>

    <p v-if="!$store.state.dramasEntries.length">居然没有已看的美剧！</p>

    <!--三星级-->
    <p v-if="category('3').length" class="starlevel" >
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
    </p>
    <el-row :gutter="20" class="category">
      <el-col :span="3" v-for="dramasEntry in category('3')">
        <div class="drama">
          <div class="operate">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <span><i class="el-icon-edit" @click="updateDramas(dramasEntry)"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="未看" placement="top">
              <span><i class="el-icon-circle-check" @click="addToWanted(dramasEntry)"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <span @click="deleteDramas(dramasEntry)"><i class="el-icon-circle-close"></i></span>
            </el-tooltip>
          </div>
          <img :src="dramasEntry.imgurl"/>

          <p class="title">{{dramasEntry.title}}</p>
        </div>
      </el-col>
    </el-row>

    <!--两星级-->
    <p v-if="category('2').length" class="starlevel" >
      <i class="el-icon-star-on"></i>
      <i class="el-icon-star-on"></i>
    </p>
    <el-row :gutter="20" class="category">
      <el-col :span="3" v-for="dramasEntry in category('2')">
        <div class="drama">
          <div class="operate">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <span><i class="el-icon-edit" @click="updateDramas(dramasEntry)"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="未看" placement="top">
              <span><i class="el-icon-circle-check" @click="addToWanted(dramasEntry)"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <span @click="deleteDramas(dramasEntry)"><i class="el-icon-circle-close"></i></span>
            </el-tooltip>
          </div>
          <img :src="dramasEntry.imgurl"/>

          <p class="title">{{dramasEntry.title}}</p>
        </div>
      </el-col>
    </el-row>

    <!--一星级-->
    <p v-if="category('1').length" class="starlevel" >
      <i class="el-icon-star-on"></i>
    </p>
    <el-row :gutter="20">
      <el-col :span="3" v-for="dramasEntry in category('1')">
        <div class="drama">
          <div class="operate">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <span><i class="el-icon-edit" @click="updateDramas(dramasEntry)"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="未看" placement="top">
              <span><i class="el-icon-circle-check" @click="addToWanted(dramasEntry)"></i></span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <span @click="deleteDramas(dramasEntry)"><i class="el-icon-circle-close"></i></span>
            </el-tooltip>
          </div>
          <img :src="dramasEntry.imgurl"/>

          <p class="title">{{dramasEntry.title}}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    export default{
        created(){
          this.fetchData()
        },
        methods:{
          fetchData(){
            this.$http.get('http://localhost:8888/dramas-entries/viewed')
            .then(function (ret) {
              this.$store.commit('fetchData', ret.data)
            })
            this.$store.state.darmasEntries;
          },
          deleteDramas(dramasEntry){
            let _id = dramasEntry._id
            this.$msgbox({
              message: '确定删除这个剧集吗？',
              showCancelButton: true
            }).then(action => {
              if(action === 'confirm'){
                this.$http.delete('http://localhost:8888/delete/' + _id)
                this.$store.commit('deleteDramas', dramasEntry);
                this.deleteSuccess()
              }
            });
          },
          updateDramas(dramasEntry){
            let data = {
              id : dramasEntry._id,
              title :dramasEntry.title,
              imgurl :dramasEntry.imgurl,
              type: dramasEntry.type,
              star:dramasEntry.star,
              edit:true
            }
            this.$store.commit('getIndex',dramasEntry);
            this.$store.commit('resetValue',data);
            this.$store.commit('dialogState',true)
          },
          addToWanted(dramasEntry){
            let _id = dramasEntry._id,_title = dramasEntry.title,_imgurl = dramasEntry.imgurl,_star = dramasEntry.star;
            this.$http.post('http://localhost:8888/addtowanted',{
              _id :_id,
              _title : _title,
              _imgurl : _imgurl,
              _star : _star,
            })
            this.$store.commit('deleteDramas', dramasEntry);
          },
          deleteSuccess(){
            this.$message({
              message: '删除成功~',
              type:'success',
              duration:1500
            });
          },
          category(n){
              var dramasEntries = this.$store.state.dramasEntries;
              var newDramas = [];
              for(var i=0;i<dramasEntries.length;i++){
                  for(var key in dramasEntries[i]){
                      if(key == "star"){
                          if(dramasEntries[i][key] == n){
                              newDramas.push(dramasEntries[i])
                          }
                      }
                  }
              }
              return newDramas;
          }
        }
    }

</script>
<style>

</style>
